<template>
  <div class="tab-cart">
    <div class="editor_head" v-show="goods.length">
      <van-icon :name="isEditor ? 'success' : 'editor'" />
      <span @click="isEditor = !isEditor">{{isEditor ? '完成' : '编辑'}}</span>
    </div>
    <van-checkbox-group @change="toggle" class="card-goods" v-model="checkedGoods">
      <div v-for="(item, i) in goods" :key="i" class="card-goods__item">

        <van-checkbox icon-class="icon-class" :key="item.id" :name="item.id" v-model="item.checked"></van-checkbox>

        <van-card :title="item.goodsName" :price="item.price" :num="item.number" :thumb="item.picUrl" @click="toDetail(item.goodsId)">
          <div slot="desc">
            <div class="van-card__desc">
              <!-- <van-tag plain style="margin-right:6px;" v-for="(spec, index) in item.specifications" :key="index">
                {{spec}}
              </van-tag> -->
              <van-tag plain style="margin-right:6px;">
                {{item.specifications}}
              </van-tag>
            </div>
          </div>
          <!--说明:由于有些商品存在限购限制 固取消数量修改逻辑-->
          <!-- <div slot="footer" v-if="isEditor">
            <van-stepper v-model="item.number" @change="stepperEvent(item,arguments)" :disabled="item.number<=1 || !item.number ? true:false" />
          </div> -->
        </van-card>

        <div class="cart_delete" v-if="isEditor" @click="deleteCart(i)">删除</div>
      </div>
    </van-checkbox-group>

    <is-empty v-if="!goods.length">您的购物车空空如也~</is-empty>

    <van-submit-bar :class="{'show':!isEditor}" :price="totalPrice" :disabled="!checkedGoods.length" :buttonText="submitBarText" :loading="isSubmit" label="总计" @submit="cartSubmit($event)">
      <van-checkbox v-model="checkedAll" @click="setCheckAll" style="padding: 0 10px;">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
  import {
    Checkbox,
    CheckboxGroup,
    Card,
    SubmitBar,
    Stepper,
    Tag
  } from 'vant';
  import {
    cartList,
    rawCartUpdate,
    rawCartChecked,
    cartDelete,
    getRawCartList,
    deleteRawCart
  } from '@/api/api';
  import {
    setLocalStorage
  } from '@/utils/local-storage';

  import isEmpty from '@/components/is-empty/';
  import _ from 'lodash';

  export default {
    data() {
      return {
        isEditor: false,
        checkedAll: false,
        isSubmit: false,
        checkedGoods: [],
        allGoods: [],
        goods: []
      };
    },
    created() {
      this.init();
    },
    computed: {
      submitBarText() {
        return this.isEditor ? '删除' : '结算';
      },
      totalPrice() {
        return this.goods.reduce(
          (total, item) =>
          total +
          (this.checkedGoods.indexOf(item.id) !== -1 ?
            item.price * item.number * 100 :
            0),
          0
        );
      }
    },

    methods: {
      toDetail(goodsId) {
        if (this.isEditor) {
          return;
        }
        this.$router.push({
          path: `/raw/material-detail?id=${goodsId}`
        })
      },
      stepperEvent(item, arg) {
        let number = arg[0];
        rawCartUpdate({
          number: number,
          goodsId: item.goodsId,
          id: item.id,
          productId: item.productId
        });
      },
      init() {
        getRawCartList().then(res => {
          this.goods = res.data.data;
          this.allGoods = this.getAllList();
          this.checkedGoods = this.getCheckedList(this.goods);
        });
      },
      getAllList() {
        let result = [];
        _.each(this.goods, v => {
          result.push(v.id);
        });
        return result;
      },
      getCheckedList(goods) {
        let result = [];
        _.each(goods, v => {
          if (v.checked) {
            result.push(v.id);
          }
        });
        return result;
      },
      cartSubmit() {
        try {
          event.stopPropagation(); //非IE浏览器
          event.preventDefault() //非IE浏览器
        } catch (event) {
          window.event.cancelBubble = true; //IE浏览器
          window.event.returnValue = false;
        }

        let cartIds = [];
        let checkedGoods = this.checkedGoods;
        _.each(checkedGoods, id => {
          cartIds.push(
            _.find(this.goods, vv => {
              return id === vv.id;
            }).id
          );
        });
        if (this.isEditor) {
          this.$dialog
            .confirm({
              message: '确定删除所选商品吗嘻嘻嘻?',
              cancelButtonText: '再想想'
            })
            .then(() => {
              this.deleteNext(cartIds);
            });
        } else {
          /**批量下单 不能支持**/
          // this.isSubmit = true;
          // setLocalStorage({
          //   AddressId: 0,
          //   rawCartId: 0
          // });
          // this.$router.push('/raw/order/checkout');
        }
      },
      setCheckAll(val) {
        if (this.checkedGoods.length === this.allGoods.length) {
          this.checkedGoods = [];
        } else {
          this.checkedGoods = this.allGoods;
        }
      },
      deleteCart(o) {
        let productId = this.goods[o].id;
        this.$dialog
          .confirm({
            message: '确定删除所选商品吗',
            cancelButtonText: '再想想'
          })
          .then(() => {
            this.$nextTick(() => {
              this.deleteNext(productId);
            });
          });
      },
      toggle(index) {
        let addcartIds = [];
        _.each(index, v => {
          let id = _.find(this.goods, result => {
            return result.id === v;
          }).id;
          addcartIds.push(id);
        });

        let delcartIds = [];
        _.each(_.difference(this.allGoods, index), v => {
          let id = _.find(this.goods, result => {
            return result.id === v;
          }).id;
          delcartIds.push(id);
        });
        if (delcartIds.length > 0) {
          rawCartChecked({
            cartIds: delcartIds,
            flag: false
          });
        }
        if (addcartIds.length > 0) {
          rawCartChecked({
            cartIds: addcartIds,
            flag: true
          });
        }

        if (index.length === this.allGoods.length) {
          this.checkedAll = true
        } else {
          this.checkedAll = false
        }
      },
      deleteNext(o) {
        let cartIds = [];
        if (o instanceof Array) {
          cartIds = o;
        } else {
          cartIds.push(o);
        }
        deleteRawCart({
          'cartIds': cartIds
        }).then(() => {
          this.init()
        });
      }
    },

    components: {
      [Card.name]: Card,
      [Tag.name]: Tag,
      [Stepper.name]: Stepper,
      [isEmpty.name]: isEmpty,
      [Checkbox.name]: Checkbox,
      [SubmitBar.name]: SubmitBar,
      [CheckboxGroup.name]: CheckboxGroup
    }
  };

</script>


<style lang="scss" scoped>
  @import '../../../assets/scss/mixin';

  .view-router {
    padding-bottom: 0;
  }

  .tab-cart {
    box-sizing: border-box;
  }

  .editor_head {
    @include one-border;
    text-align: right;
    padding: 10px;
    font-size: $font-size-normal;
    background-color: #fff;
  }

  .card-goods {
    background-color: $bg-color;
    margin-bottom: 60px;

    .card-goods__item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      background-color: #fff;
    }

    .cart_delete {
      line-height: 100px;
      padding: 0 10px;
      color: #fff;
      background-color: $orange;
    }

    .card-goods__footer {
      font-size: $font-size-normal;
      color: $font-color-gray;
    }

    .van-card__footer {
      padding-left: 98px;
    }

    .van-card__bottom {
      position: absolute;
      bottom: 0;
      width: 100%;
    }
  }

  .clear_invalid {
    width: 120px;
    color: $font-color-gray;
    border: 1px solid $font-color-gray;
    margin: 0 auto;
    text-align: center;
    padding: 5px 3px;
    margin-top: 20px;
    border-radius: 3px;
  }

  .van-checkbox__icon {
    line-height: 0 !important;
  }

  .show {
    /deep/button {
      visibility: hidden;
    }
  }

</style>
